<template>
  <div>
    <h1>Vue2 + X6 自定义节点示例 - antv-x6-vue2-shape</h1>
    <div
      id="container"
      style="
        width: 100%;
        height: 800px;
        border: 2px solid #e0e0e0;
        margin-top: 20px;
      "
    ></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Graph } from "@antv/x6";
// 导入x6-vue2-shape的核心注册方法
// import { register, useTeleport } from "@teld/x6-vue2-shape";
import { register, useTeleport } from "antv-x6-vue2-shape";
// 导入自定义Vue组件
import CustomVueNode from "./components/custom-vue-node.vue";
import CustomInputNode from "./components/custom-input-node.vue";
import CustomButtonNode from "./components/custom-button-node.vue";

export default {
  name: "App",
  components: {
    // CustomVueNode, // 保留基础自定义节点的显示（可选）
  },
  data() {
    return {
      graph: null,
    };
  },
  mounted() {
    console.log(
      "teleport container",
      document.getElementById("teleport-target"),
    );
    console.log("x6 container", document.getElementById("container"));
    // useTeleport({ vue: Vue, target: "#teleport-target"});
    useTeleport({ target: "#teleport-target" });

    this.init();
  },
  methods: {
    init() {
      // 1. 初始化X6图表
      const graph = new Graph({
        container: document.getElementById("container"),
        grid: { size: 10, visible: true }, // 显示更细的网格
        background: { color: "#f8f9fa" }, // 设置背景色
      });

      // 2. 注册自定义Vue组件为X6节点形状
      register({
        shape: "basic-vue-node", // 形状名称（后续添加节点时使用）
        component: CustomVueNode, // 关联的Vue组件
        width: 120, // 节点默认宽度
        height: 60, // 节点默认高度
        attrs: {
          // 可选：节点样式配置
          body: { stroke: "#909399", strokeWidth: 1 },
        },
      });

      register({
        shape: "input-vue-node",
        component: CustomInputNode,
        width: 180,
        height: 80,
        attrs: {
          body: { stroke: "#3498db", strokeWidth: 2 },
        },
      });

      register({
        shape: "button-vue-node",
        component: CustomButtonNode,
        width: 160,
        height: 70,
        attrs: {
          body: { stroke: "#2ecc71", strokeWidth: 2 },
        },
      });

      // 3. 向图表添加自定义节点
      graph.addNode({ shape: "basic-vue-node", x: 50, y: 50 });
      graph.addNode({ shape: "input-vue-node", x: 250, y: 80 });
      graph.addNode({ shape: "button-vue-node", x: 50, y: 180 });

      this.graph = graph;
    },
  },
};
</script>

<style scoped>
h1 {
  color: #42b983;
  margin: 20px 0;
}
</style>
